#include("/_function/layout/default.vue")
#@layout(i18n['title'])
#define jsCustom()
<template type="text/x-template" id="tpl-center-content">
    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <h1>SQL记录</h1>
                <ul class="breadcrumb">
                    <li><a href="#(CONTEXT_PATH)/common/dashboard">首页</a></li>
                    <li><a href="#(CONTEXT_PATH)/monitor/sql-history">SQL记录</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-filter"></i> 过滤</h3>
                </div>
                <div class="panel-body">
                    <form autocomplete="off" class="form-horizontal">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group required">
                                    <label class="col-sm-4 control-label"
                                           for="input-name">耗时</label>
                                    <div class="col-sm-8">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <input v-model="datatable.search[0].val" class="form-control"/></div>
                                            <div class="col-sm-6">
                                                <input v-model="datatable.search[0].val" class="form-control"/>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-list"></i> #(i18n['text_list'])</h3>
                </div>
                <div class="panel-body">
                    <data-table url="#(CONTEXT_PATH)/api/monitor/sql-history/datatable"
                                :columns="datatable.columns"
                                :draw="datatable.draw"
                                :searching="false"
                                :auto-width="false"
                                :ordering="false"
                                :length="25"
                                :conditions="datatable.conditions"
                                :search="datatable.search">
                        <template v-slot> <!-- 定义模板 -->
                            <script type="text/x-template" id="tpl-tb-table-name">
                                <div>
                                    <span :title="v" v-html="_.truncate(v, {length: 16})"></span>
                                </div>
                            </script>
                            <script type="text/x-template" id="tpl-tb-sql-text">
                                <div>
                                    <span :title="v" v-html="_.truncate(v, {length: 64})"></span>
                                </div>
                            </script>
                            <script type="text/x-template" id="tpl-tb-action">
                                <div class="btn-group">
                                    <button :data-row="data"
                                            onclick="window.ccVue.view($(this).data('row'))"
                                            type="button"
                                            data-toggle="tooltip"
                                            title="#(i18n['button_edit'])"
                                            class="btn btn-primary"><i class="fa fa-eye"></i>
                                    </button>
                                </div>
                            </script>
                        </template>
                    </data-table>
                </div>
            </div>
        </div>
        <sql-history-form :visible="viewing"
                          :row="row"
                          @toggled="toggled"></sql-history-form>
    </div>
</template>
#include("/_function/component/datatable.vue")
#include("/monitor/sql-history-form.vue")
<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('center-content', {
        created: function () {
            window.ccVue = this
        },
        template: document.getElementById('tpl-center-content'),
        data: function () {
            return {
                viewing: false,
                row: {},
                datatable: {
                    draw: 1,
                    conditions: [
                        {
                            connect: 'AND',
                            dataType: 'DATE',
                            column: 'sqlDate',
                            comparator: 'BETWEEN',
                            value: ['2023-04-12', '2023-04-13'],
                        },
                        {
                            connect: 'AND',
                            dataType: 'NUMBER',
                            column: 'elapsed',
                            comparator: 'BETWEEN',
                            value: [0, 10],
                        }, {
                            connect: 'AND',
                            combo: [
                                {
                                    connect: 'AND',
                                    dataType: 'STRING',
                                    column: 'visitor',
                                    comparator: 'EQ',
                                    value: 'admin',

                                },
                                {
                                    connect: 'OR',
                                    dataType: 'STRING',
                                    column: 'statement',
                                    comparator: 'EQ',
                                    value: 'SelectQueryImpl',
                                }
                            ]
                        }],
                    search: [{
                        col: 2,
                        val: ''
                    }],
                    columns: [
                        {title: '访问者', data: 'visitor'},
                        {title: '执行时间', data: 'sqlDate'},
                        {title: '耗时', data: 'elapsed'},
                        {title: '类型', data: 'statement'},
                        {
                            title: '表名',
                            data: 'tableName',
                            render: (v) => {
                                return new Vue(
                                    {
                                        template: document.getElementById("tpl-tb-table-name"),
                                        data: function () {
                                            return {
                                                v: v
                                            }
                                        }
                                    }
                                ).$mount().$el.outerHTML;
                            }
                        },
                        {
                            title: 'SQL',
                            data: 'sqlText',
                            render: (v) => {
                                return new Vue(
                                    {
                                        template: document.getElementById("tpl-tb-sql-text"),
                                        data: function () {
                                            return {
                                                v: v
                                            }
                                        }
                                    }
                                ).$mount().$el.outerHTML;
                            }
                        },
                        {
                            title: "操作",
                            render: (s, d, row) => {
                                return new Vue(
                                    {
                                        template: document.getElementById("tpl-tb-action"),
                                        data: function () {
                                            return {
                                                data: JSON.stringify(row)
                                            }
                                        }
                                    }
                                ).$mount().$el.outerHTML;
                            }
                        }
                    ]
                }
            }
        },
        methods: {
            toggled: function (v) {
                this.viewing = v
            },
            draw: function () {
                this.datatable.draw = this.datatable.draw + 1
            },
            view: function (row) {
                this.toggled(true)
                this.row = row
            }
        }
    })
})
</script>
#end